<template>
  <view class="exam-wrap" :data-theme="globPrimary">
    <u-navbar>
      <view class="exam-menu" :style="[menuInnerStyle]">
        <view
          v-for="item in menuList"
          :key="item.value"
          :class="[{ active: current == item.value }]"
          class="item"
          @click="handleMenuChange(item.value)"
        >
          {{ item.title }}
          <text
            v-show="current == item.value"
            :style="[{ background: globPrimaryColor }]"
            class="line"
          ></text>
        </view>
      </view>
    </u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getDataInfo"
    >
      <div v-if="current == 1" class="exam-list">
        <Student
          v-for="(item, index) in examList"
          :key="index"
          :datas="item"
          @click="onExam"
        ></Student>
      </div>
      <div v-else-if="current == 2" class="exam-list">
        <Order v-for="(item, index) in examList" :key="index" :datas="item" @click="onExam"></Order>
      </div>
    </mescroll-body>

    <!-- 人脸 -->
    <edu-face ref="refFaceVerify" :z-index="20090" @confirm="onFaceVerifyConfirm"></edu-face>

    <!-- 提示框 -->
    <u-modal
      v-model="show"
      :show-title="false"
      show-cancel-button
      confirm-text="开始考试"
      :confirm-color="globPrimaryColor"
      :confirm-style="{ borderLeft: '1rpx solid #DCDEE3' }"
      @confirm="onModelConfirm"
    >
      <view class="exam-modal">
        <view class="content">
          考试将消耗<text class="red">1</text>次作答次数，是否现在开始考试？</view
        >
        <u-checkbox @change="checkboxChange" v-model="checked" :active-color="globPrimaryColor"
          >不再提示</u-checkbox
        >
      </view>
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import Student from './components/student'
import Order from './components/order'
import { uploadFile } from '@/utils/uploadFile.js'
import { storage } from '@/utils/storage'
export default {
  mixins: [MescrollMixin],
  components: {
    Student,
    Order,
  },
  data() {
    return {
      current: 1,
      examList: [],
      menuList: [
        {
          title: '派发考试',
          value: 1,
        },
        {
          title: '购买考试',
          value: 2,
        },
      ],
      examItemData: {
        type: '',
        data: null,
      },
      show: false,
      checked: false,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
      globNavbarRightButtonWidth: 'projectSetting/globNavbarRightButtonWidth',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      const windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
    // 导航栏内部盒子的样式
    menuInnerStyle() {
      const windowWidth = this.$u.sys().windowWidth
      const contentWidth = 180
      let style = {}
      // #ifndef MP
      style.left = (windowWidth - contentWidth) / 2 + 'px'
      style.right = (windowWidth - contentWidth) / 2 + 'px'
      // #endif
      // #ifdef MP
      let rightButtonWidth = this.globNavbarRightButtonWidth
      style.left = (windowWidth - contentWidth) / 2 + 'px'
      style.right = rightButtonWidth - (windowWidth - contentWidth) / 2 + rightButtonWidth + 'px'
      // #endif
      style.width = contentWidth + 'px'
      return style
    },
  },
  methods: {
    getDataInfo(page) {
      if (this.current == 1) {
        this.$edu.api
          .getUserExamRecordStudent({
            page: page.num,
            count: page.size,
          })
          .then((res) => {
            const { data } = res
            if (!this.$u.test.empty(data)) {
              const list = data.data
              if (page.num == 1) this.examList = []
              this.examList = this.examList.concat(list)
              this.mescroll.endSuccess(list.length)
            } else {
              this.mescroll.endSuccess(0)
            }
          })
      } else {
        this.$edu.api
          .getUserExamRecordOrder({
            page: page.num,
            count: page.size,
          })
          .then((res) => {
            const { data } = res
            if (!this.$u.test.empty(data)) {
              const list = data.data
              if (page.num == 1) this.examList = []
              this.examList = this.examList.concat(list)
              this.mescroll.endSuccess(list.length)
            } else {
              this.mescroll.endSuccess(0)
            }
          })
      }
    },
    // 去公开考试
    onExam(item, type) {
      let checked = storage.get('edu-user-exam-stay-num', false)
      this.examItemData.type = type
      this.examItemData.data = item
      if (item.exam_open == 1) {
        // 公开考试
        if (type == 8 || type == 9) {
          // 是否显示提示框
          if (checked) {
            if (type == 8 && item.face_verification == 1) {
              this.$refs.refFaceVerify.onFaceMessage()
            } else if (type == 9 && item.config.face_verification == 1) {
              this.$refs.refFaceVerify.onFaceMessage()
            } else {
              this.$u.route('pageFound/exam/paper/topic', {
                id: item.paper.id,
                type: this.current,
              })
            }
          } else {
            this.show = true
          }
        } else {
          if (item.exam_rest_num == 1) {
            this.$u.toast('考试次数已用完')
          } else {
            // 是否显示提示框
            if (checked) {
              this.$u.route('/pageFound/exam/rollup/topic', {
                id: item.rollup_id,
                paper_id: item.paper_id,
              })
            } else {
              this.show = true
            }
          }
        }
      } else {
        this.$u.toast('暂未开放')
      }
    },
    // 提示弹窗
    onModelConfirm() {
      const type = this.examItemData.type
      const item = this.examItemData.data
      if (type == 8 || type == 9) {
        if (item.face_verification == 1) {
          this.$refs.refFaceVerify.onFaceMessage()
        } else {
          this.$u.route('pageFound/exam/paper/topic', {
            id: item.paper.id,
            type: this.current,
          })
        }
      } else {
        this.$u.route('/pageFound/exam/rollup/topic', {
          id: item.rollup_id,
          paper_id: item.paper_id,
        })
      }
    },
    // 提交人脸验证
    onFaceVerifyConfirm(file) {
      const item = this.examItemData.data
      uploadFile('/user/tencent/face/person/verify', file, {
        scene_key: 'exam',
        scene_id: item.paper.id,
        scene_type: 1,
      })
        .then((res) => {
          this.$u.toast(res.msg)
          this.$refs.refFaceVerify.onClose()
          this.$u.route('pageFound/exam/paper/topic', {
            id: item.paper.id,
            type: this.current,
          })
        })
        .catch((err) => {
          this.$u.toast(err.msg)
          this.$refs.refFaceVerify.resetPhoto()
        })
    },
    // tab切换
    handleMenuChange(val) {
      this.examList = []
      this.current = val
      this.mescroll.scrollTo(0, 0)
      this.mescroll.resetUpScroll()
    },
    checkboxChange(e) {
      storage.set('edu-user-exam-stay-num', e.value)
    },
  },
  onShow() {
    if (this.mescroll) {
      this.mescroll.scrollTo(0, 0)
      this.mescroll.resetUpScroll()
    }
  },
}
</script>

<style lang="scss" scoped>
.exam-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  .item {
    font-size: 32rpx;
    font-weight: 400;
    color: $edu-tips-color;
    line-height: 45rpx;
    position: relative;
    &.active {
      font-weight: 500;
      color: $edu-main-color;
    }
    .line {
      width: 40rpx;
      height: 8rpx;
      border-radius: 4rpx;
      position: absolute;
      bottom: -18rpx;
      left: 50%;
      margin-left: -20rpx;
    }
  }
}
.exam-list {
  padding: 0 30rpx;
}
.exam-modal {
  padding: 32rpx;
  .content {
    font-size: 30rpx;
    font-weight: 400;
    color: $edu-main-color;
    line-height: 44rpx;
    margin-bottom: 32rpx;
    .red {
      color: $edu-type-error;
    }
  }
}
</style>
